<template>
  <div>
    <van-tabs class="dw" v-model="active">
  <van-tab v-for="(sj,sy) in dx" :key="sy" :title="sj.name">
  </van-tab>
</van-tabs>
<div style="margin: 110px 8px 30px 8px;">
  <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="gz"
>
<template #loading>
  <loafsvg></loafsvg>
</template>
  <div class="aa" v-for="(sj,sy) in wz" :key="sy">
  <router-link :to="{path:'/article',query:{_id:sj._id,}}">

    <div v-if="sj.imageSrc.length===1">
      <div class="fdd">
        <div class="bt">{{sj.title}}</div> 
        <div v-for="(sjj,sy) in sj.imageSrc" :key="sy">
          <img class="tp" :src="sjj|imggl" v-lazy="sjj" />
        </div>
        </div>
        <div class="zz">
          <div class="zzz">作者:{{sj.author}}</div><div class="pl">评论:{{sj.comment}}</div><div class="rq">发布日期:<span>{{sj.time}}</span></div>
        </div>
     </div>
      <div v-else>
      <div>
        <div class="tit">{{sj.title}}</div> 
        <div class="tpd">
        <div v-for="(sjj,sy) in sj.imageSrc" :key="sy">
          <img class="tpp" :src="sjj" v-lazy="sjj" />
        </div>
        </div>
        </div>
        <div class="zz">
          <div class="zzz">作者:{{sj.author}}</div><div class="pl">评论:{{sj.comment}}</div><div class="rq">发布日期:<span>{{sj.time}}</span></div>
        </div>
     </div>
       </router-link>
  </div>
  </van-list>
</div>
  </div>
</template>

<script>
import {sylist,wzliat} from '@/api/syjk.js'
// import axios from 'axios'
import { timeForm } from "@/gj/timeform.js";
	import loafsvg from '@/components/gd/LoagSvg.vue'
import config from '@/config/index.js'
export default {
  components:{
    loafsvg
  },
    data() {
      return {
        // dx:[],
        active:0,
        wz:[],
        loading:false,
        finished:false,
        limit:10
      }
    },
    filters:{
          imggl(img){
                if(img.includes(config.baimgurl)||img.includes(config.baimgurls)){
                  return img+'?imageMogr2/thumbnail/!50p'

                }
          }
    },
    computed:{
             dx(){
              return this.$store.state.mkhfl.dx
             },
             cate_id(){
              return this.dx[this.active]?._id
             },
            //  id(){
            //   return this.wz.date._id
            //  }
    },
    watch:{
          cate_id(){
            this.gz()
            this.wz=[]
            this.finished=false
            //  immediate:true,
            // handler(n){
            //       if(!n)return;
            //       this.dx=[];
            //       this.gz();
            //       this.finished=false;
            //     this.wz=[];
                
            // }
          }
    },
     created(){
      // this.aa()
      // this.gz()
    },
    methods:{
    //   cdwzxq(){
    //  let {id}=this
    //    this.$router.push('wzxq?article_id'+id)
    //   },
      // aa(){
      //     sylist().then(data=>{
      //       console.log(data)
      //       this.dx=data.data
      //     }).catch(a=>{
      //       console.log(a)
      //     })
      //     // axios.get('https://d33a5037-6c63-4e92-8bb1-30018ab701ea.bspapp.com/http/api/get_cate_list').then(data=>{
      //     //   console.log(data)
      //     // })
      // },
      gz(){
        // let {cate_id}=this
            wzliat(
              {
                cate_id:this.cate_id,
                limit:this.limit,
                skip:this.wz.length
              }
            ).then(res=>{
                 console.log(res)
                 if(res.code==0){
                 

                      // let newdata=res.data
                      let newdata=res.data.map((v)=>{
                        v.time=timeForm(v.time)

                        console.log(v.time)
                        return v
                      })
                      this.wz.push(...newdata)
                      if(this.wz.length>=res.count){
                              this.finished=true
                      }else{
                        this.loading=false
                      }
                 }
                 
            })  
      }
    }
}
</script>

<style scoped>

.pl{
  margin: 0 20px 0 0;
}
/* // 超过width隐藏三个点... .zzz */
.zzz{
  width: 100px !important;      
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 20px 0 0;
}
.aa{
  border-bottom: 1px solid rgb(220,220,220);
  margin: 0 0 15px 0;
  padding: 0 0 15px 0;
  width: (375-16)px;
}
.tp{
  width: 115px;
  height: 88px;
}
.fdd{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.tpd{
  display: flex;
  justify-content: space-between;
}
.bt{
  margin: 0 0 20px 0;
  font-size: 13px;
  width: 190px;
  -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zz{
  margin: 10px 0 0 0;
  font-size: 10px;
  color: rgb(220,220,220);
  display: flex;
}
/* .zz span{
  margin: 0 8px 0 0;
} */
.tit{
  margin: 5px 5px 6px 0;
  font-size: 13px;
  /* width: 90vw; */
  /* display: flex;
  flex-wrap: wrap; */
  /* width: 98vw; */
  -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tpp{
  width: 115px;
  height: 88px;
  /* margin: 0 3px 0 0; */
}
.dw{
  position: fixed;
  left: 0;
  right: 0;
  top: 50px;
}
a{
  color: black;
}
.rq span{
  margin: 0 0 0 10px;
}
.rq{
  margin: 0 0 0 35px;
}
</style>